<script setup lang="ts">
  import { FAction, leaveType } from '@/plugins/constants.ts'
  import socketServer from '@/plugins/socketServer'
  import { useChannelStore } from '@/store/channel.ts'
  import { useChatStore } from '@/store/chat'
  import { useSessionStore } from '@/store/session'
  import { remove } from 'lodash'
  import { showConfirmDialog } from 'vant'
  import { computed, type PropType } from 'vue'
  const chat = useChatStore()
  const session = useSessionStore()
  const channel = useChannelStore()
  const props = defineProps({
    message: {
      type: Object as PropType<any>,
      default: () => {},
    },
  })
  const visitorLeave = computed(() => {
    return channel.SystemInfo.visitorLeave
  })
  // 续排业务
  const handleContinue = () => {
    console.log('继续等待？')
    socketServer.sendMessage('继续等待', 'queue_msg', () => {
      chat.updateMessages({
        role: 'visitor',
        type: 'text',
        state: 'queue_msg',
        read: false,
        content: '继续等待',
      })
    })
  }
  // 访客留言
  const handleLeave = () => {
    showConfirmDialog({
      message: '取消排队并留言?',
    }).then(() => {
      // 取消排队
      socketServer.sendMessage('', '@type_cancel_queue@', () => {
        session.updateActionState(FAction.VISITOR_LEAVE)
        remove(chat.messages, { type: 'queue' })
        session.updateLeaveType(leaveType.CANCEL_QUEUE)
      })
    })
  }
  // 取消排队
  const cancelQueue = () => {
    showConfirmDialog({
      message: '确认取消排队?',
    }).then(() => {
      // 取消排队
      remove(chat.messages, { type: 'queue' })
      socketServer.sendMessage('', '@type_cancel_queue@', () => {
        console.log('取消排队成功')
        // 取消排队成功
        session.updateActionState(FAction.CANCEL_QUEUE)
      })
    })
  }
</script>
<!-- 排队系统消息 -->
<template>
  <div
    class="inline-block flex-col items-center justify-center text-[14px] text-[#3d3d3d] rounded-[4px] px-2 py-1"
  >
    <template v-if="props.message.state === 'queue_num'">
      客服全忙,您目前排在第
      <span class="text-[#3d3d3d]">{{ props.message.queueNum }}</span>
      位,请耐心等待！
      <div class="w-full flex gap-4 justify-center items-center">
        <span class="text-[#1989fa]" @click="cancelQueue">取消排队</span>
        <span class="text-[#1989fa]" @click="handleLeave">留言</span>
      </div>
    </template>
    <template v-else-if="props.message.state === 'queue_timeout'">
      客服全忙,您目前排在第
      <span class="text-[#3d3d3d]">{{ props.message.queueNum }}</span>
      位,
      <span class="text-[#1989fa]" @click="handleContinue">继续等待</span>
      <template v-if="visitorLeave">
        或
        <span class="text-[#1989fa]" @click="handleLeave">留言</span>
      </template>
    </template>
  </div>
</template>

<style scoped></style>
